<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QQ音乐</title>
   <link rel="stylesheet" href="styles/music.css">
  </head>

  <body>
    <div class="header">
      <img src="./imgs/qqmusic.png" alt="QQ音乐logo" />
    </div>  
    <div class="container">
      <!-- 歌单推荐部分 -->
      <div class="section">
        <h2>歌单推荐</h2>
        <div class="tags">
          <span class="active">为你推荐</span>
          <span>运动</span>
          <span>网络歌曲</span>
          <span>思念</span>
          <span>官方歌单</span>
          <span>情歌</span>
        </div>
        <div class="list">
          <div class="item">
            <img
              src="http://qpic.y.qq.com/music_cover/8HhavvWNIicpyjlv0UnT5TWLRxhfmGTVwYtiaWd54wZItUPRu7486Fqw/300?n=1"
              alt="歌单封面"
            />
            <p>翻唱女神J.Fla | 只唱你最爱的旋律</p>
            <p>播放量：891.03万</p>
          </div>
          <div class="item">
            <img
              src="http://qpic.y.qq.com/music_cover/GUalk7A0sBGvkxmUrXIf7KnEVGJFicuoT7xSkZLHiaEMB5Ojbccf6cbA/300?n=1"
              alt="歌单封面"
            />
            <p>古风女声控，优美旋律为你而来</p>
            <p>播放量：171.2万</p>
          </div>
          <div class="item">
            <img
              src="http://qpic.y.qq.com/music_cover/QrmdXDG3R4jGSEzqu0qtR4vw6Glga0N83eKicVCib61BZw5lZtWEUMibQ/300?n=1"
              alt="歌单封面"
            />
            <p>想开一家早餐店，叫“早点见面”</p>
            <p>播放量：92.0万</p>
          </div>
          <div class="item">
            <img
              src="http://qpic.y.qq.com/music_cover/R8unPZMA4Vp5v2Ms96bst9nFCfe4YPBFBADicMz2LB0kLfEiaUM4ymiag/300?n=1"
              alt="歌单封面"
            />
            <p>好评999+英文歌！轻松解压100%</p>
            <p>播放量：1239.02万</p>
          </div>
          <div class="item">
            <img
              src="http://qpic.y.qq.com/music_cover/IknB7UUG0ME0zalRpPKYjJiauia2kJzKs5gtKQY4Vq9TJYLXdjQK9fCA/300?n=1"
              alt="歌单封面"
            />
            <p>书房背景乐 沉浸于字里行间的时光</p>
            <p>播放量：303.3万</p>
          </div>
        </div>
      </div>

      <!-- 新歌首发部分 -->
      <div class="section">
        <h2>新歌首发</h2>
        <div class="add-all">
          <button>▶ 播放全部</button>
        </div>
        <div class="tags">
          <span class="active">最新</span>
          <span>内地</span>
          <span>港台</span>
          <span>欧美</span>
          <span>韩国</span>
          <span>日本</span>
        </div>
        <div class="list song-list">
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002myPA84G7kxG_1.jpg"
              alt="歌曲封面"
            />
            <div class="info">
              <p>Sabotage</p>
              <span>Bebe Rexha</span>
            </div>
            <div class="time">02:56</div>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003UIhdS4fBLqU_1.jpg"
              alt="歌曲封面"
            />
            <div class="info">
              <p>如果人人爱音乐</p>
              <span>张蔷</span>
            </div>
            <div class="time">03:46</div>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002v6ztM40D0iP_1.jpg"
              alt="歌曲封面"
            />
            <div class="info">
              <p>你就不要想起我</p>
              <span>R1SE赵磊</span>
            </div>
            <div class="time">04:30</div>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000005wEOc07Udwu_1.jpg"
              alt="歌曲封面"
            />
            <div class="info">
              <p>软肋</p>
              <span>李宇春</span>
            </div>
            <div class="time">04:17</div>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003vGVIq243Mzm_2.jpg"
              alt="歌曲封面"
            />
            <div class="info">
              <p>一爱如故（《长歌行》电视剧插曲）</p>
              <span>摩登兄弟刘宇宁</span>
            </div>
            <div class="time">03:55</div>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000hNAwr4dbutH_1.jpg"
              alt="歌曲封面"
            />
            <div class="info">
              <p>向宿命挥拳的人</p>
              <span>阿云嘎</span>
            </div>
            <div class="time">04:00</div>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000dcpok0A8RP3_2.jpg"
              alt="歌曲封面"
            />
            <div class="info">
              <p>花好月圆</p>
              <span>周迅</span>
            </div>
            <div class="time">02:34</div>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R90x90M000004X1Kbg34UHQ5_1.jpg"
              alt="歌曲封面"
            />
            <div class="info">
              <p>Renegades</p>
              <span>ONE OK ROCK</span>
            </div>
            <div class="time">04:04</div>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000018mpfj0lSvS0_1.jpg"
              alt="歌曲封面"
            />
            <div class="info">
              <p>驯化者</p>
              <span>陈俊豪/陈誉庚/TGM-姜京佐/刘冠佑/罗一舟/唐九洲/G.G张思源</span>
            </div>
            <div class="time">03:28</div>
          </div>
        </div>
      </div>

      <!-- MV部分 -->
      <div class="section">
        <h2>MV</h2>
        <div class="tags">
          <span class="active">精选</span>
          <span>内地</span>
          <span>韩国</span>
          <span>港台</span>
          <span>欧美</span>
          <span>日本</span>
        </div>
        <div class="list">
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M102000SY7kU0vIuoT.jpg"
              alt="阿云嘎《向宿命挥拳的人》MV封面"
            />
            <p>向宿命挥拳的人（《新斗罗大陆》...</p>
            <p>阿云嘎</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 8002</p>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M000003vHDbe24Jqpl.jpg"
              alt="Sunnee杨芸晴《雨》MV封面"
            />
            <p>雨</p>
            <p>Sunnee杨芸晴</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 3334</p>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M1010047OlaH3P3f0J.jpg"
              alt="摩登兄弟刘宇宁《一爱如故》MV封面"
            />
            <p>一爱如故（《长歌行》电视剧插曲）</p>
            <p>摩登兄弟刘宇宁</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 4.2万</p>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M101002cYg662xvSlL.jpg"
              alt="动力火车《我很好骗》MV封面"
            />
            <p>我很好骗</p>
            <p>动力火车</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 1.1万</p>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M101001YVtJL2sr2Z7.jpg"
              alt="TVB《造梦时学会飞行》MV封面"
            />
            <p>造梦时学会飞行（《声梦传奇》主...</p>
            <p>TVB</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 1483</p>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003RlAau1dFne3.jpg"
              alt="Lil Ghost小鬼《What's Wrong With Me》MV封面"
            />
            <p>What's Wrong With Me (Punk V...</p>
            <p>Lil Ghost小鬼</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 20.2万</p>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M102003c3tSe1ehWwN.jpg"
              alt="吴宣仪《Let's Party》MV封面"
            />
            <p>Let's Party（《和平精英》2周年庆...</p>
            <p>吴宣仪</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 6.6万</p>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M0000013X2t31kvJC4.jpg"
              alt="RADWIMPS《鋼の羽根》MV封面"
            />
            <p>鋼の羽根</p>
            <p>RADWIMPS</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 2861</p>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003aYDEH2kWTX7.jpg"
              alt="IU《에필로그 (epilogue)》MV封面"
            />
            <p>에필로그 (epilogue)</p>
            <p>IU</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 7856</p>
          </div>
          <div class="item">
            <img
              src="https://y.gtimg.cn/music/photo_new/T015R640x360M101000xHMCS1g3sSW.jpg"
              alt="圭贤《Coffee》MV封面"
            />
            <p>圭贤《Coffee》MV</p>
            <p>圭贤</p>
            <p><img src="./imgs/icon_listen.png" alt="播放量图标"> 1.5万</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>